import React, { Component } from "react"
import TheButton from '@/components/TheButton';

export default class EditInput extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: props.editData ?? {},
      index: props.editIdex ?? 0,
      warning: false
    }
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.editData.status != prevState.data.status) {
      this.setState({
        data: prevProps.editData
      })
    }

  }
  edit = (data, index, warning) => {
    this.setState({
      warning: false
    })
    this.props.onEdit({ data, index, warning })
  }
  regInput(value) {
    value = value.replace(/[^\d.]/g, '')// 只能是数字和小数点，不能是其他输入
    value = value.replace(/^\./g, "");// 保证第一位只能是数字，不能是点
    value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");  // 小数只能出现1位
    value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 小数点后面保留2位
    return value
  }
  onInput = (e) => {
    let value = e.target.value
    if (value !== '') {
      this.setState({
        warning: false
      })
    }
    if (this.state.data.key === 'dayNumber') {
      value = value.replace(/[^\d]/g, '')// 只能是数字
    } else {
      value = this.regInput(value)
    }
    this.setState({
      data: {
        ...this.state.data,
        value: value
      }
    })
  }
  onSave = () => {
    let { data } = this.state
    if (data.value === '') {
      this.setState({ warning: true })
      return false
    }
    let regex = /^(?!.*(?<![\d.])0\d).*(?<![.])$/ //不能以.结尾 并且除小数点外不能连续输入0
    if (!regex.test(data.value)) {
      React.$message({ type: 'error', content: '输入格式不正确!' })
      return false
    }
    if (data.key === 'dayNumber' && (data.value > 10000 || data.value < 1)) {
      React.$message({ type: 'error', content: '只能输入1-10000的数字' })
      return false
    }
    if (data.key !== 'dayNumber' && (data.value > 999999.99 || data.value < 0.01)) {
      React.$message({ type: 'error', content: '只能输入0.01-999999.99的数字' })
      return false
    }
    this.props.onSave({ data: this.state.data, index: this.state.index })
  }
  onCancel = () => {
    this.setState({
      warning: false
    })
    this.props.onCancel({ data: this.state.data, index: this.state.index })
  }
  onBlur = (e) => {
    let { data } = this.state
    let regex = /^(?!.*(?<![\d.])0\d).*(?<![.])$/ //不能以.结尾 并且除小数点外不能连续输入0
    if (!regex.test(e.target.value)) {
      return false
    }
    if (data.key !== 'dayNumber' && e.target.value != '') {
      this.setState({
        data: { ...data, value: Number(data.value).toFixed(2) }
      })
    }
  }
  render() {
    let { data, index, warning } = this.state
    if (warning && data.status === 0) {
      warning = false
    }
    return (
      <div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <input style={{ border: warning ? '1px solid red' : '1px solid #ccc', width: 80, paddingLeft: 5 }} disabled={data.status === 0} onInput={this.onInput} value={data.value} onBlur={this.onBlur} maxLength={9}></input>
          {data.status === 0 ? <span>
            <TheButton haspermi={["wallet:redPacketTransfer:edit"]} onClick={() => this.edit(data, index, warning)}>编辑</TheButton>
          </span> : <span style={{ display: 'flex' }}>
            <TheButton haspermi={["wallet:redPacketTransfer:cancel"]} onClick={this.onCancel}>取消</TheButton>
            <TheButton haspermi={["wallet:redPacketTransfer:save"]} onClick={this.onSave}> 保存</TheButton>
          </span>}
        </div>
        {warning && <div style={{ color: 'red', fontSize: 12 }}>此项为必填项</div>}
      </div>
    );
  }
}